<template>
  <main class="upShop-mian">
    <div class="upShop-div">
      <p><span>添加动态参数</span><span @click="closeCompileUsers">X</span></p>
      <div class="ipt-div">
        <span>参数名称：</span>
        <el-input v-model="input1" />
      </div>
      <div class="ipt-div">
        <span>参数说明：</span>
        <el-input v-model="input2" />
      </div>
      <section>
        <el-button @click="closeCompileUsers">取消</el-button>
        <el-button type="primary" @click="comUpdata">确定</el-button>
      </section>
    </div>
  </main>
</template>

<script setup>
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref, onMounted } from "vue";
// 接收参数
const emit = defineEmits(["sss"]);
// 关闭遮罩层
function closeCompileUsers() {
  emit("sss", false);
}
// 接收id
let props = defineProps({
  hihi: Number,
});
// 参数名称
let input1 = ref();
// 参数说明
let input2 = ref();
// 确定
function comUpdata() {
  console.log(props.hihi);
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  const data = {
    // 参数名称
    attr_name: input1.value,
    // 动态
    attr_sel: "only",
    // 参数说明
    attr_vals: input2.value,
  };
  axios
    .post(`/api/categories/${props.hihi}/attributes`, data, { headers })
    .then((res) => {
      alert(res.data.meta.msg);
      // 关闭遮罩层
      closeCompileUsers();
    });
}
</script>

<style scoped>
.upShop-mian {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.upShop-div {
  width: 700px;
  height: 300px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

p {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0px 0px 40px;
}
.ipt-div {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.ipt-div span {
  width: 100px;
}
section {
  display: flex;
  position: absolute;
  bottom: 70px;
  right: 80px;
}
</style>